import React from 'react'
import { useEffect, useState } from "react"
import axios from 'axios';
import { SubmitBar, Checkbox } from 'react-vant';
import { Icon } from 'react-vant';

export default function Shopping(props) {
  // const onSubmit = () => Toast('点击按钮');
  //数据
  const [data, setdata] = useState([])
  const [ifshow, setshow] = useState(false)

  //总价
  const [allprice, setallprice] = useState(0)
  //获取数据
  useEffect(() => {
    getlist();
  }, [])
  //请求数据
  const getlist = async () => {
    await axios({
      url: '/cart',
    }).then(res => {
      console.log(85);
      setdata([...res.data.data])
    })
  }
  //上一组件
  const go = () => {
    props.history.push({
      pathname: '/app/shop'
    })
  }
  //单选择
  const handleflag = (item, index) => {
    if (item.show) {
      data[index].show = 0
    } else {
      data[index].show = 1
    }
    setdata([...data])
    allprices();
    ifall();
  }
  //全选
  const all = () => {
    if (!ifshow) {
      data.forEach((item, index) => {
        item.show = 1
      })
      setshow(true)
    } else {
      data.forEach((item, index) => {
        item.show = 0
      })
      setshow(false)
    }
    setdata([...data])
    allprices();
  }
  //减
  const sub = (item, index) => {
    console.log(item.price);
    if (item.num > 1) {
      data[index].num = data[index].num - 1;
    }
    else {
      return
    }
    setdata([...data]);
    allprices()
  }
  //加
  const add = (item, index) => {
    console.log(item.num);
    if (item.num) {
      data[index].num = data[index].num + 1;
    }
    setdata([...data]);
    setallprice();
    allprices();
  }
  //总价
  const allprices = () => {
    const datature = data.filter(item => item.show === 1)
    const alls = datature.reduce((a, b) => {
      return a += b.price * b.num
    }, 0)
    setallprice(alls)
  }
  //判断全选
  const ifall = () => {
    const price = data.filter(item => item.show === 1)
    if (data.length !== 0 && data.length === price.length) {
      setshow(true)
    } else if (data.length !== price.length) {
      setshow(false)
    }
  }
  //删除
  const deteles = (id, index) => {
    axios({
      url: '/cartDel',
      method: 'post',
      data: { value: id }
    })
    data.splice(index, 1)
    allprices();
    ifall();
    setdata([...data])
    if (data.length === 0) {
      setshow(false)
    }
  }
  //去支付
  const money = () => {
    const num = data.filter(item => item.show === 1)
    const nums = num.reduce((a, b) => { return a + b.price }, 0)
    props.history.push({
      pathname: '/order',
      state: { value: num, addnum: allprice, numarr: nums }
    })
  }

  //支付
  const alipay = () => {
    axios({
      url: '/alipay'
    }).then(res => {
      console.log(res.data);

    })
  }
  return (
      <div className="shopping">
        <div className="shopping-header">
          <span onClick={() => { go() }}><Icon name="arrow-left" /></span>
          <span style={{ fontSize: '900' }} className='shop'>购物车</span>
        </div>
        <div className="shopping-main">
          {
            data.map((item, index) => <div className="shopbox" key={index}>
              <input type="checkbox" checked={item.show ? true : false} className="rv-checkbox" onChange={() => { handleflag(item, index) }} />
              <dl>
                <dd><img src={item.drugimg} alt="" /></dd>
                <dt>
                  <h3 style={{ marginLeft: '15px' }}>{item.drug}</h3>

                  {/* <div className="box-bottom"> */}
                  <span style={{ color: 'red', marginLeft: '15px', fontSize: '14px' }}>￥{item.price}</span>
                  <br />
                  <div className="button">
                    <button onClick={() => { sub(item, index) }}>-</button>
                    <span>{item.num}</span>
                    <button onClick={() => { add(item, index) }}>+</button>
                    <span className="detele" onClick={() => { deteles(item.id, index) }}><Icon name="delete-o" /></span>
                  </div>

                  {/* </div> */}
                </dt>
              </dl>
            </div>)
          }

        </div>
        <div className="shopping-footer">
          {/* <span><input type="checkbox" checked={ifshow} onChange={() => { all() }} /> 全选</span>
                    <span>合计:{allprice}</span>
                    <button onClick={() => { money() }}>提交订单</button> */}
          <SubmitBar
            price={allprice * 100}
            buttonText="提交订单"
            onSubmit={() => { alipay() }}
            onClick={() => { money() }}
            // onClick=
          >
            <Checkbox checked={ifshow} onChange={() => { all() }}>全选</Checkbox>
          </SubmitBar>
        </div>

      </div>

  )
}
